<template>
  <t-box>
    <div class="update-avatar">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="上传头像：" prop="avatar">
          <t-image-upload
            :id="0"
            :is-file-name="false"
            @success="success"
            v-model="form.avatar"
          ></t-image-upload>
        </el-form-item>
        <div class="t-m-t-40 t-flex t-row-center">
          <t-button
            size="small"
            type="primary"
            @success="success"
            @click="submit"
            >确认</t-button
          >
        </div>
      </el-form>
    </div>
  </t-box>
</template>
<script>
export default {
  data() {
    return {
      form: {
        avatar: "",
        businessId: "",
      },
      rules: {
        avatar: [{ required: true, message: "请上传头像", trigger: "blur" }],
      },
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
  },
  mounted() {
    this.form.avatar = this.userInfo.HeadPortraitShow
      ? this.userInfo.HeadPortraitShow.Url
      : "";
  },
  methods: {
    submit() {
      this.formValidate().then(() => {
        this.$http
          .UserInfoModifyHeadPortrait(this.form.businessId)
          .then((res) => {
            if (res.data.code === 0) {
              this.$confirm("头像修改成功，是否返回上一页？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() => {
                this.goBack("route");
              });
            }
          });
      });
    },
    success(res) {
      this.form.businessId = res.data.businessId;
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-button {
  padding: 7px 30px;
}
/deep/.el-upload-dragger {
  border-radius: 50%;
}
.update-avatar {
  width: 350px;
}
</style>